<template>
<div>
  <div>
    <i class="el-icon-discount" style="color: red;font-size: 20px"></i>
    <span style="font-size: 20px"><b>饮食管理</b></span></div><br>
  <div><i class="el-icon-arrow-right" style="color: red;font-size: 15px"></i>
    <span style="font-size: 15px"><b>饮食修改</b></span></div><br>
  <el-form  ref="ruleForm"  class="demo-ruleForm"  style="position: relative;left: 30%;width: 500px" >
  <el-form-item  style="width: 400px">
          <span slot="label">
      	<span style="font-size: 15px">名称修改（15字以内）</span>
        </span>
    <el-input v-model="form.foodname" maxlength="15"  show-word-limit></el-input>
  </el-form-item>
  <el-form-item>
    <span style="font-size: 15px">图片修改（若无操作则默认不修改）</span>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="/photo/upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :file-list="fileList"
      :on-success="success"
      :multiple="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500KB</div>
    </el-upload>
  </el-form-item>
  <el-form-item  prop="desc">
            <span slot="label">
      	<span style="font-size: 15px">简介修改（50字内）</span>
        </span><br>
    <el-input type="textarea" v-model="form.brief" maxlength="50" show-word-limit style="width: 600px"></el-input>
  </el-form-item>
    <el-form-item  style="width: 400px">
          <span slot="label">
      	<span style="font-size: 15px">热量（大卡/100g）</span>
        </span>
      <el-input v-model="form.kic" maxlength="10"  show-word-limit></el-input>
    </el-form-item>
</el-form>
  <div style="display:flex;align-items:center;justify-content:center">
  <el-button>取消修改</el-button>
  <el-button type="primary" @click="sub()">确认修改</el-button>
  </div>
</div>
</template>

<script>
export default {
  name: "addfood",
  data() {
    return {
      fileList: [],
      form: {
        id:null,
        url:null,
        foodname:"",
        brief:"",
        kic:"",
        adminid:"",
      }
    }
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    success(res) {
      this.form.url = res.data;
      console.log(this.form.url);
      this.$message.success('图片上传成功')
    },
    //上传文件让第二次覆盖第一的文件
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]
      }
    },
    sub:function () {
        var data = {
          'adminid': this.form.adminid,
          'caloric': this.form.kic,
          'foodbrief': this.form.brief,
          'foodname': this.form.foodname,
          'foodphoto': this.form.url,
          'foodtype': sessionStorage.getItem("foodtype"),
          'id': this.form.id
        };
        console.log(data)
        var url='/food';
        this.$axios.put(url,data)
          .then( (res)=> {
            if (res.data.code === 0) {
              this.$message({message:"修改成功！", type: 'success'})
              // function myMessage() {
                this.$router.push({path:'/details',query: {foodtype:sessionStorage.getItem("foodtype")}});
              // }
              // setTimeout(myMessage, 1000);
            }
            else {
              this.$message({message:"修改失败！", type: 'error'})
            }
          }).catch(function (error) {
          console.log(error);
        } );
      },
    indexs:function(){
      //根据petid查询到宠物的信息并展示
      var id=this.$route.query.foodid;
      console.log(id);
      var url="/food/"+id;
      this.$axios.get(url)
        .then( (res)=> {
          console.log(res)
           this.form.id=res.data.data.id;
           this.form.foodname=res.data.data.foodname;
           this.form.url=res.data.data.foodphoto;
           this.form.brief=res.data.data.foodbrief;
           this.form.adminid=res.data.data.adminid;
           this.form.kic=res.data.data.caloric
           console.log(this.form)
        }).catch(function (error) {
        console.log(error);
      } );
    },
  },
  created(){
    //自动加载indexs方法
    this.indexs();
  },
}
</script>

<style scoped>

</style>
